var listenerList = {
  //插件事件数组
  message: function(e) {
    console.log(e);
  }
};

var ev = {
  dispatch: function(eventKey) {
    var args = Array.prototype.slice.call(arguments, 1);
    listenerList[eventKey].apply(this, args);
    return this;
  },
  listener: function(eventKey, callback) {
    if (typeof eventKey === "string" && typeof callback === "function") {
      listenerList[eventKey] = callback;
    }
    return this;
  }
};
const CustomEvent = function(options) {
  var _this = this;
  var config = {
    debug: false,
    ...options
  };
  this.on = ev.listener;
  this.trigger = ev.dispatch;
  if (config.debug) {
    this.trigger("message", { a: "hello" }); //自执行一下
  }
  return this;
};

export default class SignCoordinate {
  constructor(props) {
    //这里初始化class的时候需要传map对象进来
    this.map = props;
    this.coordinate = [0, 0];
    this.event = new CustomEvent({ debug: false });
    this.features;
    this.source;
    this.fenceLayer;
    this.clickEvent;
    // this.bob.on("click",(args)=>{
    //     console.log("事件参数信息",args);
    //     this.listener(callback)
    // })
    let getMarkerStyle = () => {
      let svg =
        '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">' +
        '<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>' +
        '<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
      let mysvg = new Image();
      mysvg.src = "data:image/svg+xml," + escape(svg);
      let image = new ol.style.Icon({
        img: mysvg, // 设置Image对象
        imgSize: [30, 30] // 及图标大小
      });
      let style = new ol.style.Style({
        image: image
      });
      return style;
    };
    //样式
    this.fenceStyle = getMarkerStyle();
    this.init();
  }
  init() {
    this.features = new ol.Feature({
      geometry: new ol.geom.Point(this.coordinate)
    });
    this.features.setStyle(this.fenceStyle);
    //临时图层的数据源
    this.source = new ol.source.Vector({
      features: [this.features]
    });
    //新建临时图层，并设置临时图层渲染各种要素的样式
    this.fenceLayer = new ol.layer.Vector({
      source: this.source
    });

    this.map.addLayer(this.fenceLayer);

    this.clickEvent = this.map.on("click", evt => {
      this.coordinate = evt.coordinate;
      this.event.trigger("click", { coordinate: evt.coordinate });
      this.setMarkerPosition(evt.coordinate); //获取覆盖物此坐标
    });
  }
  // 设置marker坐标
  setMarkerPosition(coordinate) {
    let geometry = new ol.geom.Point(coordinate);
    this.features.setGeometry(geometry);
  }

  // 获取当前marker坐标
  getMarkerPosition() {
    return this.coordinate;
  }

  // 删除数据源中的要素  清除当前图层
  clear() {
    this.source.clear();
    this.source = null;
    this.map.removeLayer(this.fenceLayer); //从地图中删除给定的图层。
    this.fenceLayer = null;
  }

  // 移除事件监听
  unByKey() {
    ol.Observable.unByKey(this.clickEvent);
    this.clickEvent = null;
  }

  // 当页面退出
  destroy() {
    this.fenceStyle = null;
    this.event = null;
    this.clear();
    this.unByKey();
    this.map = null;
  }
}
